<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">我的订单</view>
    </view>

    <view class="box">
        <view class="commodity">
            <view class="commodity_img">
                <image src="@/static/images/pic_sy_jinrigengxin.png" mode=""></image>
            </view>
            <view class="commodity_information">
                <view class="information_title">巴蜀风土人情解析巴蜀风土人情解析</view>
                <view class="information_num">数量：1</view>
                <view class="information_price">
                    <view class="information_price_color">￥39.90</view>
                    <view>合计</view>
                </view>
            </view>
        </view>
        <view class="price">
            <view class="subtotal">
                <view class="subtotal_left">商品小计</view>
                <view class="subtotal_right">￥39.90</view>
            </view>
            <view class="amount">
                <view class="amount_left">应付金额合计</view>
                <view class="amount_right">￥39.90</view>
            </view>
        </view>
        <view class="other">
            <view class="other_item">
                <view class="coupon">优惠券</view>
                <view class="coupon_select" @click="goCoupon">
                    选择优惠券
                    <u-icon name="arrow-right" color='#ADADAD'></u-icon>
                </view>
            </view>
            <view class="other_item">
                <view class="coupon">应付金额合计</view>
                <view class="coupon_select">￥0.00</view>
            </view>
            <view class="other_item">
                <view class="coupon">订单编号</view>
                <view class="coupon_select">
                    202036498721364
                    <view class="copy" @click="copy('202036498721364')">复制</view>
                </view>
            </view>
            <view class="other_item">
                <view class="coupon">支付方式</view>
                <view class="coupon_select">支付宝</view>
            </view>
            <view class="other_item">
                <view class="coupon">下单时间</view>
                <view class="coupon_select">2020-07-03 10</view>
            </view>
        </view>
    </view>
    <view class="bottom_btn">
        <view class="btn_item"></view>
        <view class="btn_item">
            合计：
            <view class="btn_item_price">￥39.90</view>
        </view>
        <view class="btn_item">
            <view class="pay_btn">立即支付</view>
        </view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      height: 0,
      statusBarHeight: 0,
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goCoupon(){
        uni.navigateTo({
            url: "/pages/training/coupon",
        })
    },
    copy(str){
        uni.setClipboardData({
            data: str,
            success: function() {
                console.log('复制成功',str);
            }
        })
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  .commodity{
    padding:32rpx 30rpx ;
    background: #F7F8FA;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    .commodity_img{
        width: 180rpx;
        height: 180rpx;
        border-radius: 24rpx;
        image{
            width: 180rpx;
            height: 180rpx;
            border-radius: 24rpx;
        }
    }
    .commodity_information{
        margin-left: 30rpx;
        .information_title{
            width: 420rpx;
            font-size: 32rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .information_num{
            font-size: 28rpx;
            color: #ADADAD;
            margin-top: 16rpx;
        }
        .information_price{
            font-size: 28rpx;
            color: #444444;
            margin-top: 36rpx;
            display: flex;
            flex-flow: row-reverse;
            .information_price_color{
                color:#FF8A4C ;
            }
        }
    }
  }
  .price{
    padding:32rpx 30rpx ;
    background: #F7F8FA;
    border-radius: 24rpx;
    margin-top: 32rpx;
    .subtotal{
        display: flex;
        justify-content: space-between;
        .subtotal_left{
            font-size: 28rpx;
            color: #888888;
        }
        .subtotal_right{
            font-size: 28rpx;
            color: #444444;
        }
    }
    .amount{
        display: flex;
        justify-content: space-between;
        margin-top: 63rpx;
        .amount_left{
            font-size: 28rpx;
            color: #888888;
        }
        .amount_right{
            font-size: 28rpx;
            color: #FF8A4C;
        }
    }
  }
  .other{
    padding:32rpx 30rpx 16rpx 30rpx;
    background: #F7F8FA;
    border-radius: 24rpx;
    margin-top: 32rpx;
    .other_item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .coupon{
            font-size: 28rpx;
            color: #888888;
        }
        .coupon_select{
            font-size: 28rpx;
            color: #444444;
            display: flex;
            align-items: center;
            .copy{
                color: #55B877;
                margin-left: 16rpx;
            }
        }
    }
  }
}
.bottom_btn{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 33rpx 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0,0,0,0.05);
    .btn_item{
        width: 232rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn_item_price{
            color: #FF8A4C;
        }
        .pay_btn{
            width: 232rpx;
            height: 78rpx;
            background: #55B877;
            border-radius: 39rpx 39rpx 39rpx 39rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
            color: #FFFFFF;
        }
    }
}
</style>